<template>
  <div class="contentWrapper wpx1200">
    <el-card class="box-card mt20">
		  <div slot="header" class="clearfix">
		  	<img src="../../../../static/img/header/dianpu.png" alt="" class="cardbg"/>
		    <span>店铺检测</span>
		  </div>
		  <div>
		  	<div class="cardContentTop">
		  		 <el-form ref="form" :model="form" label-width="88px">
					  <myselect  v-on:selectevent="selectevent"></myselect>
					  <el-form-item label="检测范围:">
					    <el-select v-model="form.region" placeholder="手动选择" class="mr10">
					      <el-option label="区域一" value="shanghai"></el-option>
					      <el-option label="区域二" value="beijing"></el-option>
					    </el-select>
					    <el-select v-model="form.region" placeholder="全店搜索" class="mr10">
					      <el-option label="区域一" value="shanghai"></el-option>
					      <el-option label="区域二" value="beijing"></el-option>
					    </el-select>
					    <el-input v-model="form.name" class="mr20 w217" placeholder="搜索宝贝标题，空则为全部"></el-input> 
							<el-button type="primary" size="small">搜索</el-button>
							<el-button type="primary" size="small">已选</el-button>
					  </el-form-item>
					  <div class="result">
					  	<div class="resultItem clearFix" v-for="i in 8" @click="checkItem($event)">
					  		<div class="floatl itemImg">
					  			<img src="../../../../static/img/sys/bg.png" alt=""  width="100%" height="100%"/>
					  		</div>
					  		<div class="floatl itemInfo ml10">
					  			<p class="color0db9de">资生堂 红椿洗发水+沐浴露套餐</p>
					  			<p class="mt30">商品编号：45678935431</p>
					  			<p class="mt5">货号：212131321</p>
					  		</div>
					  		<div class="triangle-bottomright">
					  			<i class="el-icon-check itemChecked"></i>
					  		</div>
					  	</div>
					  </div>
					  <div class="mt20 clearFix">
							<router-link to="/shopResult">
								<el-button type="primary" size="small">计算价格</el-button>
							</router-link>
					  </div>
					</el-form>
		  	</div>
		  </div>
		</el-card>
  </div>
</template>

<script>
import myselect from "@/components/parts/select/select"
	
export default {
  name: 'shopCheck',
  components : {
    myselect
  },
  data () {
    return {
//  	fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}],
    	fileList: [],
    	form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        }
    }
  },
  mounted: function () {
  },
   methods: {
   	selectevent(data){
// 		console.error(data)
   		this.list = data;
   	},
	  handleRemove(file, fileList) {
	    console.log(file, fileList);
	  },
	  handlePreview(file) {
	    console.log(file);
	  },
	  handleExceed(files, fileList) {
	    this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
	  },
	  beforeRemove(file, fileList) {
	    return this.$confirm(`确定移除 ${ file.name }？`);
	  },
	  checkItem(e){
	  	//暂时为了效果
	  	$(e.target).closest(".resultItem").toggleClass('checked')
	  }
	}
  
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.cardContentTop {
		width: 1000px;
    margin: 0 auto;
	}
	.result {
		width: 100%;
    height: 500px;
    border: 1px solid #dcdcdc;
    border-radius: 3px;
    overflow-y: scroll;
	}
	.resultItem {
		width: 420px;
    height: 130px;
    padding: 10px;
    margin: 20px;
    border: 1px solid #dcdcdc;
    border-radius: 3px;
    color: #606266;
    background: #f1f1f1;
    cursor: pointer;
    position: relative;
    float: left;
	}
	.itemImg {
		width: 40%;
    height: 100%;
	}
	.color0db9de {
		color: #0db9de
	}
	.triangle-bottomright {
    width: 0;
    height: 0;
    border-bottom: 36px solid #157ff6;
    border-left: 36px solid transparent;
    position: absolute;
    right: 0;
    bottom: 0;
    display: none;
	}
	.itemChecked {
		  position: absolute;
	    right: 1px;
	    bottom: -35px;
	    font-size: 20px;
	    color: #fff;
	}
	.checked .triangle-bottomright {
		display: block;
	}
	.checked{
		border: 1px solid #157ff6;
		background: #e3f6ff;
	}
</style>
